<template>
    <div style="width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; background-color: white">
      <div style="display: flex; align-items: center">
        <i class="menu-open-close" :class="[menuClose ? 'el-icon-s-unfold' : 'el-icon-s-fold']" style="font-size: 24px; margin-left: 12px; cursor: pointer;"
        @click="menuOpenOrClose"></i>
        <el-page-header @back="goBack" style="margin-left: 24px; display: flex; align-items: center">
          <template slot="title">
            <div class="back">返回</div>
          </template>
          <template slot="content">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item v-for="item of breadcrumb" :key="item.name">{{item.name}}</el-breadcrumb-item>
            </el-breadcrumb>
          </template>
        </el-page-header>
      </div>
      <div style="display: flex; align-items: center">
        <i class="full-screen" :class="isFullScreen ? 'el-icon-files' : 'el-icon-full-screen'" style="font-size: 24px; margin-right: 24px" @click="fullScreen"></i>
        <el-dropdown trigger="click">
          <el-avatar class="avatar" :src="duck" style="margin-right: 12px; background-color: transparent" fit="contain"></el-avatar>
          <el-dropdown-menu class="dropdown-menu" slot="dropdown">
            <el-dropdown-item class="dropdown-menu-item">
              <div @click="logout">退出</div>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
</template>

<script>
import duck from '@/assets/svg/duck.gif'
export default {
  name: 'xt-top',
  data() {
    return {
      duck
    }
  },
  computed: {
    menuClose() {
      return this.xtGetter('top', 'getMenuClose')
    },
    breadcrumb() {
      return this.xtGetter('top', 'getBreadcrumb')
    },
    isFullScreen() {
      return this.xtGetter('top', 'getIsFullScreen')
    }
  },
  methods: {
    menuOpenOrClose() {
        this.xtMutation('top', 'setMenuClose', !this.menuClose)
    },
    goBack() {
      this.xtGo(-1)
    },
    fullScreen() {
      this.$emit('full-screen')
    },
    async logout() {
      let state = this.$store.state
      let keys = Object.keys(state)
      for (let key of keys) {
        this.xtMutation(key, 'reset')
      }
      sessionStorage.clear()
      await this.xtReplace('login')
    }
  }
}
</script>

<style lang="scss" scoped>
.dropdown-menu::v-deep {
  background-color: #364052;
  border-color:  #364052;

  .popper__arrow::after {
    border-bottom-color: #364052 !important;
  }
  .dropdown-menu-item {
    color: #919398;
    &:hover {
      background-color: #2b3342;
    }
  }
}
.el-page-header::v-deep {
  .el-icon-back{
    display: none;
  }
}
.menu-open-close, .full-screen, .back, .avatar {
  cursor: pointer;
  &:hover {
    transform: scale(1.2);
    transition: transform 300ms;
  }
}
</style>